﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-store"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <title>AdminLTE 2 | Starter</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i}"/>
    <link rel="stylesheet"
          th:href="@{https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mall/revolution/css/settings.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mall/revolution/css/layers.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/mall/revolution/css/navigation.css}"/>
    <link rel="stylesheet" th:href="@{/mall/css/main.css}"/>
</head>
<body class="animsition animsition">
<div class="home-1" id="page">

    <div th:replace="@{/include/fore_header}::header"></div>
    <div class="banner banner-image-fit-screen">
        <div class="rev_slider slider-home-1" id="slider_1">
            <ul>
                <li>
                    <img class="rev-slidebg" th:src="@{/mall/images/slider/1.jpg}" alt="demo"
                         data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat"
                         data-bgparallax="10">
                </li>
            </ul>
        </div>
    </div>
    <section class="boxed-sm">
        <div class="container">
            <div class="row">
                <div class="product-category-grid-style-1">
                    <div class="row">
                        <div class="col-sm-4">
                            <a href="#">
                                <figure class="product-category-item">
                                    <div class="thumbnail">
                                        <a th:href="@{/goods/findByCategory?keyword=蔬菜&pageNum=1&orderType=default}"><img th:src="@{/mall/images/category-product/1.jpg}" alt=""/></a>
                                    </div>
                                    <figcaption>
                                        <h3>蔬菜</h3>
                                    </figcaption>
                                </figure>
                            </a>
                        </div>
                        <div class="col-sm-4">
                            <a href="#">
                                <figure class="product-category-item">
                                    <div class="thumbnail">
                                        <a th:href="@{/goods/findByCategory?keyword=水果&pageNum=1&orderType=default}"><img th:src="@{/mall/images/category-product/2.jpg}" alt=""/></a>
                                    </div>
                                    <figcaption>
                                        <h3>水果</h3>
                                    </figcaption>
                                </figure>
                            </a>
                        </div>
                        <div class="col-sm-4">
                            <a href="#">
                                <figure class="product-category-item">
                                    <div class="thumbnail">
                                       <a th:href="@{/goods/findByCategory?keyword=肉&pageNum=1&orderType=default}"> <img th:src="@{/mall/images/category-product/3.jpg}" alt=""/></a>
                                    </div>
                                    <figcaption>
                                        <h3>肉</h3>
                                    </figcaption>
                                </figure>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="boxed-sm">
        <div class="container">
            <div class="heading-wrapper text-center">
                <h3 class="heading">Our Products</h3>
            </div>
            <div class="row">
                <div class="row js-product-masonry-layout-1 product-masonry-layout-1">
                    <div class="grid-sizer"></div>
                    <figure class="item">
                        <div class="product product-style-2">
                            <div class="img-wrapper">
                                <a href="#">
                                    <img class="img-responsive" th:src="@{/mall/images/product/isotope-01.jpg}"
                                         alt="product thumbnail"/>
                                </a>
                                <div class="product-control-wrapper bottom-right">
                                    <div class="wrapper-control-item">
                                        <a class="js-quick-view" href="#" type="button" data-toggle="modal"
                                           data-target="#quick-view-product">
                                            <span class="lnr lnr-eye"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-wish-list">
                                        <a class="js-wish-list js-notify-add-wish-list" href="#">
                                            <span class="lnr lnr-heart"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-add-cart js-action-add-cart">
                                        <a class="animate-icon-cart" href="#">
                                            <span class="lnr lnr-cart"></span>
                                        </a>
                                        <svg x="0px" y="0px" width="36px" height="32px" viewbox="0 0 36 32">
                                            <path stroke-dasharray="19.79 19.79" fill="none" ,="," stroke-width="2"
                                                  stroke-linecap="square" stroke-miterlimit="10"
                                                  d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
                                        </svg>
                                    </div>
                                </div>
                                <figcaption class="desc">
                                    <h3>
                                        <a class="product-name" href="#">Salad</a>
                                    </h3>
                                    <span class="price">$2.00</span>
                                </figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure class="item item-size-2">
                        <div class="product product-style-2">
                            <div class="img-wrapper">
                                <a href="#">
                                    <img class="img-responsive" th:src="@{/mall/images/product/isotope-03.jpg}"
                                         alt="product thumbnail"/>
                                </a>
                                <div class="product-control-wrapper bottom-right">
                                    <div class="wrapper-control-item">
                                        <a class="js-quick-view" href="#" type="button" data-toggle="modal"
                                           data-target="#quick-view-product">
                                            <span class="lnr lnr-eye"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-wish-list">
                                        <a class="js-wish-list js-notify-add-wish-list" href="#">
                                            <span class="lnr lnr-heart"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-add-cart js-action-add-cart">
                                        <a class="animate-icon-cart" href="#">
                                            <span class="lnr lnr-cart"></span>
                                        </a>
                                        <svg x="0px" y="0px" width="36px" height="32px" viewbox="0 0 36 32">
                                            <path stroke-dasharray="19.79 19.79" fill="none" ,="," stroke-width="2"
                                                  stroke-linecap="square" stroke-miterlimit="10"
                                                  d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
                                        </svg>
                                    </div>
                                </div>
                                <figcaption class="desc">
                                    <h3>
                                        <a class="product-name" href="#">Bean</a>
                                    </h3>
                                    <span class="price">$3.20</span>
                                </figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure class="item">
                        <div class="product product-style-2">
                            <div class="img-wrapper">
                                <a href="#">
                                    <img class="img-responsive" th:src="@{/mall/images/product/isotope-02.jpg}"
                                         alt="product thumbnail"/>
                                </a>
                                <div class="product-control-wrapper bottom-right">
                                    <div class="wrapper-control-item">
                                        <a class="js-quick-view" href="#" type="button" data-toggle="modal"
                                           data-target="#quick-view-product">
                                            <span class="lnr lnr-eye"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-wish-list">
                                        <a class="js-wish-list js-notify-add-wish-list" href="#">
                                            <span class="lnr lnr-heart"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-add-cart js-action-add-cart">
                                        <a class="animate-icon-cart" href="#">
                                            <span class="lnr lnr-cart"></span>
                                        </a>
                                        <svg x="0px" y="0px" width="36px" height="32px" viewbox="0 0 36 32">
                                            <path stroke-dasharray="19.79 19.79" fill="none" ,="," stroke-width="2"
                                                  stroke-linecap="square" stroke-miterlimit="10"
                                                  d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
                                        </svg>
                                    </div>
                                </div>
                                <figcaption class="desc">
                                    <h3>
                                        <a class="product-name" href="#">Spinach</a>
                                    </h3>
                                    <span class="price">$3.10</span>
                                </figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure class="item">
                        <div class="product product-style-2">
                            <div class="img-wrapper">
                                <a href="#">
                                    <img class="img-responsive" th:src="@{/mall/images/product/isotope-04.jpg}"
                                         alt="product thumbnail"/>
                                </a>
                                <div class="product-control-wrapper bottom-right">
                                    <div class="wrapper-control-item">
                                        <a class="js-quick-view" href="#" type="button" data-toggle="modal"
                                           data-target="#quick-view-product">
                                            <span class="lnr lnr-eye"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-wish-list">
                                        <a class="js-wish-list js-notify-add-wish-list" href="#">
                                            <span class="lnr lnr-heart"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-add-cart js-action-add-cart">
                                        <a class="animate-icon-cart" href="#">
                                            <span class="lnr lnr-cart"></span>
                                        </a>
                                        <svg x="0px" y="0px" width="36px" height="32px" viewbox="0 0 36 32">
                                            <path stroke-dasharray="19.79 19.79" fill="none" ,="," stroke-width="2"
                                                  stroke-linecap="square" stroke-miterlimit="10"
                                                  d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
                                        </svg>
                                    </div>
                                </div>
                                <figcaption class="desc">
                                    <h3>
                                        <a class="product-name" href="#">Lemon</a>
                                    </h3>
                                    <span class="price">$1.10</span>
                                </figcaption>
                            </div>
                        </div>
                    </figure>
                    <figure class="item">
                        <div class="product product-style-2">
                            <div class="img-wrapper">
                                <a href="#">
                                    <img class="img-responsive" th:src="@{/mall/images/product/isotope-05.jpg}"
                                         alt="product thumbnail"/>
                                </a>
                                <div class="product-control-wrapper bottom-right">
                                    <div class="wrapper-control-item">
                                        <a class="js-quick-view" href="#" type="button" data-toggle="modal"
                                           data-target="#quick-view-product">
                                            <span class="lnr lnr-eye"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-wish-list">
                                        <a class="js-wish-list js-notify-add-wish-list" href="#">
                                            <span class="lnr lnr-heart"></span>
                                        </a>
                                    </div>
                                    <div class="wrapper-control-item item-add-cart js-action-add-cart">
                                        <a class="animate-icon-cart" href="#">
                                            <span class="lnr lnr-cart"></span>
                                        </a>
                                        <svg x="0px" y="0px" width="36px" height="32px" viewbox="0 0 36 32">
                                            <path stroke-dasharray="19.79 19.79" fill="none" ,="," stroke-width="2"
                                                  stroke-linecap="square" stroke-miterlimit="10"
                                                  d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"></path>
                                        </svg>
                                    </div>
                                </div>
                                <figcaption class="desc">
                                    <h3>
                                        <a class="product-name" href="#">Onion</a>
                                    </h3>
                                    <span class="price">$2.00 </span>
                                </figcaption>
                            </div>
                        </div>
                    </figure>
                </div>
            </div>
        </div>
    </section>
    <div class="call-to-action-style-1">
        <img class="rellax bg-overlay" th:src="@{/mall/images/call-to-action/1.jpg}" alt=""/>
        <div class="overlay-call-to-action"></div>
        <div class="container">
            <div class="row">
                <p class="h3">Organic Food</p>
                <h2>Healthy - Fresh - Delicious.</h2>
                <a class="btn btn-brand pill" th:href="@{/goods/shopList?orderType=default&pageNum=1}">VIEW MORE </a>
            </div>
        </div>
    </div>
</div>
<div th:replace="@{/include/fore_footer}::footer"></div>
<div class="modal fade" id="quick-view-product" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg modal-quickview woocommerce" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="woocommerce-product-gallery">
                            <div class="main-carousel-product-quick-view">
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/01.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/02.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/03.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/04.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/05.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                            </div>
                            <div class="thumbnail-carousel-product-quickview">
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/01.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/02.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/03.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/04.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                                <div class="item">
                                    <img class="img-responsive" th:src="@{/mall/images/product/05.jpg}"
                                         alt="product thumbnail"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="summary">
                            <div class="desc">
                                <div class="header-desc">
                                    <h2 class="product-title">Sald</h2>
                                    <p class="price">$2.00</p>
                                </div>
                                <div class="body-desc">
                                    <div class="woocommerce-product-details-short-description">
                                        <p>Duis vestibulum ante velit. Pellentesque orci felis, pharetra ut pharetra ut,
                                            interdum at mauris. Aenean efficitur aliquet libero sit amet scelerisque.
                                            Suspendisse efficitur mollis eleifend. Aliquam tortor nibh, venenatis quis
                                            sem dapibus, varius egestas lorem a sollicitudin. </p>
                                    </div>
                                </div>
                                <div class="footer-desc">
                                    <form class="cart">
                                        <div class="quantity buttons-added">
                                            <input class="minus" value="-" type="button"/>
                                            <input class="input-text qty text" step="1" min="1" max="" name="quantity"
                                                   value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric"
                                                   type="number"/>
                                            <input class="plus" value="+" type="button"/>
                                        </div>
                                        <div class="group-btn-control-wrapper">
                                            <button class="btn btn-brand no-radius">ADD TO CART</button>
                                            <button class="btn btn-wishlist btn-brand-ghost no-radius">
                                                <i class="fa fa-heart"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="product-meta">
                                <p class="posted-in">Categories:
                                    <a href="#" rel="tag">Food</a>
                                </p>
                                <p class="tagged-as">Tags:
                                    <a href="#" rel="tag">Natural</a>,
                                    <a href="#" rel="tag">Organic</a>,
                                    <a href="#" rel="tag">Health</a>,
                                    <a href="#" rel="tag">Green</a>,
                                    <a href="#" rel="tag">Vegetable</a>
                                </p>
                                <p class="id">ID:
                                    <a href="#">A203</a>
                                </p>
                            </div>
                            <div class="widget-social align-left">
                                <ul>
                                    <li>
                                        <a class="facebook" data-toggle="tooltip" title="Facebook"
                                           href="http://www.facebook.com/authemes">
                                            <i class="fa fa-facebook"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="pinterest" data-toggle="tooltip" title="Pinterest"
                                           href="http://www.pinterest.com/authemes">
                                            <i class="fa fa-pinterest"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="twitter" data-toggle="tooltip" title="Twitter"
                                           href="http://www.twitter.com/authemes">
                                            <i class="fa fa-twitter"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="google-plus" data-toggle="tooltip" title="Google Plus"
                                           href="https://plus.google.com/authemes">
                                            <i class="fa fa-google-plus"></i>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="instagram" data-toggle="tooltip" title="Instagram"
                                           href="https://instagram.com/authemes">
                                            <i class="fa fa-instagram"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/mall/js/library/jquery.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap.min.js}"></script>
<script th:src="@{/mall/js/function-check-viewport.js}"></script>
<script th:src="@{/mall/js/library/slick.min.js}"></script>
<script th:src="@{/mall/js/library/select2.full.min.js}"></script>
<script th:src="@{/mall/js/library/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/jquery.mmenu.all.min.js}"></script>
<script th:src="@{/mall/js/library/rellax.min.js}"></script>
<script th:src="@{/mall/js/library/isotope.pkgd.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-notify.min.js}"></script>
<script th:src="@{/mall/js/library/bootstrap-slider.js}"></script>
<script th:src="@{/mall/js/library/in-view.min.js}"></script>
<script th:src="@{/mall/js/library/countUp.js}"></script>
<script th:src="@{/mall/js/library/animsition.min.js}"></script>
<script th:src="@{/mall/revolution/js/jquery.themepunch.tools.min.js}"></script>
<script th:src="@{/mall/revolution/js/jquery.themepunch.revolution.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.actions.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.carousel.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.kenburn.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.layeranimation.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.migration.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.navigation.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.parallax.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.slideanims.min.js}"></script>
<script th:src="@{/mall/revolution/js/extensions/revolution.extension.video.min.js}"></script>
<script th:src="@{/mall/js/global.js}"></script>
<script th:src="@{/mall/js/config-banner-home-1.js}"></script>
<script th:src="@{/mall/js/config-mm-menu.js}"></script>
<script th:src="@{/mall/js/config-set-bg-blog-thumb.js}"></script>
<script th:src="@{/mall/js/config-isotope-product-home-1.js}"></script>
<script th:src="@{/mall/js/config-carousel-thumbnail.js}"></script>
<script th:src="@{/mall/js/config-carousel-product-quickview.js}"></script>
<script th:src="@{/mall/js/demo-add-to-cart.js}"></script>
<script>
    $(function () {
        $(".header-style-1").removeClass("static");
    });
</script>
</body>
</html>

